/* eslint-disable arrow-body-style */
/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable no-debugger */
/**
 * 表格体组件
 * 组件描述：渲染表格<Table>，提供表格本身功能；
 * @author LiAnqi
 * @Date 2022.2.22
 * @Date 2022.6.9
 */

import React from 'react'
import { Table } from 'antd'


function TableMain(props) {
  // debugger
  // Props
  const {
    columns,
    rowKey,
    rowSelection,
    onTableChange,
    onRowClick: oneClick,
    onRowDoubleClick: doubleClick,
    size,
    ...restProps
  } = props

  /**
   * 表格事件
   *  onClick：单击
   *  onChange：分页、排序、筛选变化时触发
   *  onDoubleClick：双击
   *  onContextMenu：右击
   *  onMouseEnter：鼠标移入行
   *  onMouseLeave：鼠标移出行
   */
  // const onRow = onRowEvent
  const onRow = (record, index) => {
    return {
      onClick: (e) => {
        if (oneClick) {
          oneClick(record, index)
        }
      },
      onDoubleClick: (e) => {
        if (doubleClick) {
          doubleClick(record, index)
        }
      },
      onContextMenu: (e) => {},
      onMouseEnter: (e) => {},
      onMouseLeave: (e) => {},
    }
  }

  const onChange = (pagination, filters, sorter, extra) => {
    onTableChange({pagination, filters, sorter, extra})
  }

  return (
    // <div
    //   style={{
    //     backgroundColor: '#ff6600',
    //     // width: 1000,
    //     // height: '100%',
    //     flex: 1,
    //     overflow: 'hidden',
    //     padding: 10,
    //   }}
    // >

    //   <div style={{ backgroundColor: '#336699', width: 1500, height: '100%' }}></div>
    // </div>
    <div className="table-main-container">
      <div className="table-main-container-inner">
        <Table
          columns={columns.map(item => {
            item.ellipsis = true
            return item
          })}
          rowKey={(record) => record[rowKey]}
          onRow={onRow}
          onChange={onChange}
          rowSelection={rowSelection}
          {...restProps}
          size={size}
        />
      </div>
    </div>
  )
}

export default TableMain
